<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { useUserStore } from '@/stores/user.js'

const router = useRouter()
const user = useUserStore()

const username = ref('')
const password = ref('')
const confirmPassword = ref('')

const register = () => {
    // 验证

    // 数组中最后一个用户对象
    let lastUser = user.userList[user.userList.length-1]
    // 当前注册id
    let id = parseInt(lastUser.id) + 1
    // 创建注册用户对象
    const person = {
        name: username.value,
        password: password.value,
        // id: (Array(6).join('0') + id).slice(-6),
        id: ('00000' + id).slice(-6),
        imgUrl: 'http://www.dell-lee.com/imgs/vue3/orange.png',
        list: [
            { title: '红包', content: 0},
            { title: '优惠劵', content: '0张'},
            { title: '红豆', content: 0},
            { title: '白条', content: 0}
        ],
        addressList: [],
        currrentAddress: null
    }
    // axios post
    user.userList.push(person)

    console.log(user.userList)
}

</script>

<template>
   <div class="register">
        <div class="register_img">
            <img src="http://www.dell-lee.com/imgs/vue3/user.png" alt="">
        </div>
        <div class="register_phone">
            <input type="text" v-model="username" placeholder="请输入用户名">
        </div>
        <div class="register_password">
            <input type="password" v-model="password" placeholder="请输入密码">
        </div>
        <div class="register_confirm_password">
            <input type="password" v-model="confirmPassword" placeholder="确认密码">
        </div>
        <div class="register_btn" @click="register">注册</div>
        <div class="register_link" @click="router.push({ path: '/login'})">已有账号去登录</div>
    </div>
</template>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
.register {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);

    &_img {
        img {
            width: .66rem;
            height: .66rem;
            display: block;
            margin: 0 auto .4rem auto;
        }
    }
    &_phone, &_password, &_confirm_password {
        margin: 0 .4rem .16rem .4rem;
        line-height: .48rem;
        border: .01rem solid rgba(0, 0, 0, .1);
        border-radius: .06rem;
        padding: 0 .16rem;
        background-color: $dark-bgColor;

        input {
            border: none;
            outline: none;
            line-height: .48rem;
            width: 100%;
            background: none;
            font-size: .16rem;
            color: $content-fontcolor;
        }
    }
    &_btn {
        margin: .32rem .4rem .16rem .4rem;
        line-height: .48rem;
        text-align: center;
        background: $btn-bgColor;
        box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
        border-radius: 0.04rem;
        color: $bgColor;
        font-size: 0.16rem;
    }
    &_link {
        text-align: center;
        font-size: .14rem;
        color: $content-notice-fontcolor;
    }
}
</style>